<template>
	<view>
		<basetab name='添加地址'></basetab>
		<view class="add-item fr-s-c p-30 fs-28">
			<text class="w-160">收货人</text>
			<input type="text" v-model="info.name" placeholder-style="color: #aaaaaa;" class="flex-1" placeholder="请输入姓名" >
		</view>
		<view class="add-item fr-s-c p-30 fs-28">
			<text class="w-160">联系电话</text>
			<input type="number" v-model="info.phone"  placeholder-style="color: #aaaaaa;" maxlength="11" class="flex-1" placeholder="请输入联系电话" >
		</view>
		<view class="add-item fr-s-c p-30 fs-28">
			<text class="w-160">验证码</text>
			<input type="number" v-model="info.code"  placeholder-style="color: #aaaaaa;" maxlength="11" class="flex-1" placeholder="请输入联系电话" >
			<view
				style="border-radius: 6rpx; padding: 10rpx 20rpx;font-size: 20rpx;font-weight: 400; color: rgba(255, 136, 0, 1); border: 2px solid rgba(255, 136, 0, 1);            ">
				发送验证码
			</view>
		</view>
		<picker mode="region" class="w-1" @change="changeRegion">
			<view class="add-item fr-s-c p-30 fs-28">
				<text class="w-160">收货地址</text>
				<text class="flex-1" style="color: #aaaaaa;" v-if="!info.city">请选择省、市、区</text>
				<text class="flex-1" style="color: #aaaaaa;" v-else>{{info.city}}</text>
				<u-icon name="arrow-right" top="2"></u-icon>
			</view>
		</picker>
		<textarea class="textarea p-30 fs-28 w-1" v-model="info.address" placeholder-style="color: #aaaaaa;" placeholder="请输入详细地址(街道、楼牌号等)"></textarea>
		<view class="w-1" style="height: 20rpx; background: #F2F2F2;" ></view>
	<!-- 	<view class="fr-b-c w-1 p-30" style="padding-right: 0;">
			<text class="fs-28 c-33">设为默认地址</text>
			<switch :checked="checked" @change="changeSwitch" color="#30b9f7" style="transform:scale(0.5)"></switch>
		</view> -->
		<view class="fr-c add-btn submitBtn c-ff fs-32 " @click="addAddress">
			确定
		</view>
	</view>
</template>

<script>
import basetab from '../../componets/bartop.vue'
	export default {
		components:{
		
			basetab
		
		},
		data() {
			return {
				id:0,
				info:{
					name:''	,
					phone:'',
					code:'',
					city:'',
					address:'',
					is_default:0
				}
			}
		},
		onLoad(o) {
			// if(o.id){
			// 	this.id = o.id
			// 	this.getAddressInfo()
			// }
		
		},
		computed:{
			checked(){
				return this.info.is_default==1
			}
		},
		methods: {
			getAddressInfo(){
				this.$get({
					url:'/address/getAddress',
					data:{
						id:this.id
					}
				}).then(res=>{
					this.info = res.data
				})
			},
			// 更改默认
			changeSwitch(e){
				let val = e.detail.value
				this.info.is_default = val?1:0
			},
			// 修改地区
			changeRegion(e){
				let value = e.detail.value;
				this.info.city = value.join('')
			},
			addAddress(){
				if(!this.info.name) return this.$u.toast('请输入姓名');
				if(!this.info.phone) return this.$u.toast('请输入手机号');
				if(!this.info.city) return this.$u.toast('请选择城市');
				if(!this.info.address) return this.$u.toast('请输入详细地址');
				if(this.id==0){
					this.$post({
						url:"/address/create",
						data:this.info
					}).then(res=>{
						getApp().tt('添加成功','success')
						setTimeout(()=>{
								this.$lastMethod('onRefresh')
								uni.navigateBack()
						},1500)
					})
				}else{
					this.$post({
						url:"/address/update",
						data:{
							id:this.id,
							...this.info
						}
					}).then(res=>{
						getApp().tt('修改成功','success')
						setTimeout(()=>{
								this.$lastMethod('onRefresh')
								uni.navigateBack()
						},1500)
					})
				}
				
			}
		}
	}
</script>

<style>
page{
	background: #ffffff;
	padding-bottom: 150rpx;
}
.add-item{
	border-bottom: 1rpx solid #E5E5E5;
}
.phone{
	color: #DD5757;
}
.select-img{
	width: 30rpx;
	height: 30rpx;
}
.add-btn{
	position: fixed;
	left: 30rpx;
	bottom: 60rpx;
	width: 690rpx;
	height: 90rpx;
	background: linear-gradient(270deg, rgba(255, 101, 61, 1) 0%, rgba(255, 136, 0, 1) 100%);
/* 	box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.12); */
	border-radius: 45rpx;
}
.w-160{
	width: 160rpx;
}
.textarea{
	height: 150rpx;
}
</style>
